<template>
	<view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
		<view class="nav">
			<block v-for="(item,index) in menu" :key="index">
				<view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
					<text class="name">{{item.name}}</text>
					<text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
				</view>
			
			</block>
		<view class="iconfont1 icon-paixu paixun" :class="{'onPaixun':sort==true}" @click="paixun">
			
		</view>
		</view>
		<view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
		<block v-for="(page,page_index) in subData" :key="page_index">
			<view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
				<block v-if="page.type=='hierarchy'&& page.submenu.length>0">
					<scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']" :scroll-y="true"
					 :scroll-into-view="'first_id'+firstScrollInto">
						<block v-for="(sub,index) in page.submenu" :key="index">
							<view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
								<view class="menu-name">
									<text>{{sub.name}}</text>
									<text class="iconfont selected"></text>
								</view>
							</view>
						</block>
					</scroll-view>
					<block v-for="(sub,index) in page.submenu" :key="index">
						<scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
						 :scroll-into-view="'second_id'+secondScrollInto">
							<block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
								<view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
									<view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
										<text>{{sub_second.name}}</text>
										<text class="iconfont selected"></text>
									</view>
									<view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
										<block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
											<text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
											 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
											<text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
												 class="iconfont triangle"></text></text>
										</block>
									</view>
								</view>
							</block>
						</scroll-view>
					</block>
				</block>
				<block v-if="page.type=='filter'">
					<view class="filter">
						<scroll-view class="menu-box" :scroll-y="true">
							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
								<view class="title">{{box.name}}</view>
								<view class="labels">
									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
									 :class="{'on':label.selected}">{{label.name}}</view>
								</view>
							</view>
						</scroll-view>
						<view class="btn-box">
							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
							<view class="submit" @tap="setFilterData(page_index)">确定</view>
						</view>
					</view>
				</block>
				<block v-if="page.type=='radio'">
					<view class="filter">
						<view class="menu-box" >
							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
								<view class="title">{{box.name}}</view>
								<view class="labels">
									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
									 :class="{'on':label.selected}">{{label.name}}</view>
								</view>
							</view>
						</view>
						<view class="btn-box">
							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
							<view class="submit" @tap="setFilterData(page_index)">确定</view>
						</view>
					</view>

				</block>
				
			</view>
		</block>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				subData: [], //菜单数据
				menu: [], //顶部横条数据
				showPage: -1, //菜单页面显示/隐藏动画控制
				pageState: [], //页面的状态
				activeMenuArr: [], //UI状态
				shadowActiveMenuArr: [], //记录选中
				defaultActive: [],
				triangleDeg: [], //小三角形的翻转动画控制
				isShowMask: false, //遮罩层显示/隐藏动画控制
				maskVisibility: false, //遮罩层显示/隐藏状态
				//滚动区域定位
				firstScrollInto: 0,
				secondScrollInto: 0,
				componentTop: 0, //组件top
				isReadNewSelect: false,
				sort:false,
			}
		},
		props: {
			filterData: {
				value: Array,
				default: []
			},
			defaultSelected: {
				value: Array,
				default: []
			},
			updateMenuName: {
				value: Boolean,
				default: true
			},
			dataFormat: {
				value: String,
				default: 'Array'
			}
		},
		watch: {
			filterData: {
				handler() {
					this.initMenu(); //filterData重新赋值初始化菜单
				},
				immediate: true
			},
			defaultSelected(newVal) {
				if (newVal.length == 0) {
					return;
				}
				this.defaultActive = JSON.parse(JSON.stringify(newVal));
				this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
				if (this.updateMenuName) {
					this.setMenuName();
				}
			}
		},
		methods: {
			initMenu() {
				let tmpMenuActiveArr = [];
				let tmpMenu = [];
				for (let i = 0; i < this.filterData.length; i++) {
					let tmpitem = this.filterData[i];
					tmpMenu.push({
						//如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
						name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
						type: tmpitem.type
					});
					//初始化选中项数组-ui状态
					tmpMenuActiveArr.push(this.processActive(tmpitem));
					//初始化角度数组
					this.triangleDeg.push(0);
					//初始化控制显示状态数组
					this.pageState.push(false);
					//递归处理子菜单数据
					tmpitem = this.processSubMenu(tmpitem);
					this.filterData[i] = tmpitem;
				}
				this.menu = tmpMenu;
				//初始化选中项数组
				tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr :
					tmpMenuActiveArr;
				this.defaultActive = [];
				this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
				//加载菜单数据
				this.subData = this.filterData;
				//设定顶部菜单名字
				if (this.updateMenuName) {
					this.setMenuName();
				}
			},
			setMenuName() {
				for (var i = 0; i < this.activeMenuArr.length; i++) {
					let row = this.activeMenuArr[i];
					if (typeof(row[0]) != 'object') {
						var tmpsub = false;
						if (row.length > 0 && row[0] != null) {
							tmpsub = this.subData[i].submenu[row[0]];
							if (row.length > 1 && row[1] != null) {
								tmpsub = tmpsub.submenu[row[1]];
								if (row.length > 2 && row[2] != null) {
									tmpsub = tmpsub.submenu[row[2]];
								}
							}
						} else {
							tmpsub = false;
						}
						if (tmpsub) {
							this.menu[i].name = tmpsub.name;
						}
					}
				}
			},
			//展开更多
			showMoreSub(index) {
				this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
				this.$forceUpdate();
			},
			//选中
			selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
				//读取记录
				if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
					level1_index) {
					this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
				} else {
					this.activeMenuArr[page_index].splice(0, 1, level1_index);
					(level2_index != null || this.activeMenuArr[page_index].length >= 2) && this.activeMenuArr[page_index].splice(1, 1,
						level2_index) || this.activeMenuArr[page_index].splice(1, 1);
					(level3_index != null || this.activeMenuArr[page_index].length >= 3) && this.activeMenuArr[page_index].splice(2, 1,
						level3_index) || this.activeMenuArr[page_index].splice(2, 1);
				}
				//写入结果
				if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[
						level1_index].submenu.length == 0)) {
					let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
					if (this.updateMenuName) {
						this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null &&
							sub.name) || this.subData[page_index].submenu[level1_index].name;
					}
					this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
					this.togglePage(this.showPage);
				}
			},
			//写入结果，筛选
			setFilterData(page_index) {
				this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
				this.togglePage(this.showPage);
			},
			
			//重置结果和ui，筛选
			resetFilterData(page_index) {
				let tmpArr = [];
				let level = this.shadowActiveMenuArr[page_index].length;
				while (level > 0) {
					tmpArr.push([]);
					let box = this.subData[page_index].submenu[level - 1].submenu;
					for (let i = 0; i < box.length; i++) {
						this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
					}
					level--;
				}
				this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
				this.$forceUpdate();
			},
			//选中筛选类label-UI状态
			selectFilterLabel(page_index, box_index, label_index) {
				let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
				if (find_index > -1) {
					this.activeMenuArr[page_index][box_index].splice(find_index, 1);
					this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
				} else {
					this.activeMenuArr[page_index][box_index].push(label_index);
					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
				}
				this.$forceUpdate();
			},
			//选中单选类label-UI状态
			selectRadioLabel(page_index, box_index, label_index) {

				let activeIndex = this.activeMenuArr[page_index][box_index][0];
				if (activeIndex == label_index) {
					this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
					this.activeMenuArr[page_index][box_index][0] = null;
				} else {
					if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) {
						this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
					}

					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
					this.activeMenuArr[page_index][box_index][0] = label_index;
				}
				this.$forceUpdate();
			},
			//菜单开关
			togglePage(index) {
				if (index == this.showPage) {
					this.hidePageLayer(true);
					this.hideMask();
					this.showPage = -1;
				} else {
					if (this.showPage > -1) {
						this.hidePageLayer(false);
					}
					this.showPageLayer(index);
					this.showMask();
				}
			},
			//hide遮罩层
			hideMask() {
				this.isShowMask = false;
				setTimeout(() => {
					this.maskVisibility = false;
				}, 200);
			},
			paixun(){
				if(this.sort==false){
					this.sort=true
				}else{
					this.sort=false
				}
				console.log(this.sort)
				this.$emit('sort',this.sort)
			},
			//show遮罩层
			showMask() {
				this.maskVisibility = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShowMask = true;
					}, 0);
				})
			},
			//hide菜单页
			hidePageLayer(isAnimation) {
				this.triangleDeg[this.showPage] = 0;
				let tmpIndex = this.showPage;
				if (isAnimation) {
					setTimeout(() => {
						this.pageState.splice(tmpIndex, 1, false);
					}, 200);
					this.confirm();
				} else {
					this.pageState.splice(tmpIndex, 1, false)
				}
				this.firstScrollInto = null;
				this.secondScrollInto = null;
			},
			confirm() {
				let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
				let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));

				//对结果做一下处理
				index.forEach((item, i) => {
					if (typeof(item[0]) == 'object') {
						//针对筛选结果过一个排序
						item.forEach((s, j) => {
							if (s != null) {
								s.sort((val1, val2) => {
									return val1 - val2;
								});
								item[j] = s;
								s.forEach((v, k) => {
									value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[
										j].submenu[v].value;
									if (this.subData[i].type == 'radio' && value[i][j][k] == null) {
										value[i][j] = [];
										index[i][j] = [];
									}
								});
							}
						});
					} else {
						let submenu = this.subData[i].submenu[item[0]];
						value[i][0] = submenu.value;
						if (value[i].length >= 2 && item[1] != null) {
							if (submenu.submenu.length > 0) {
								submenu = submenu.submenu[item[1]];
								value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null;
							} else {
								value[i][1] = null
							}
							if (value[i].length >= 3 && item[2] != null) {
								if (submenu.submenu.length > 0) {
									submenu = submenu.submenu[item[2]];
									value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null;
								} else {
									value[i][2] = null;
								}
							}
						}
					}
					index[i] = item;

				});
				// 输出
				this.$emit('confirm', {
					index: index,
					value: value
				});
			},
			//show菜单页
			showPageLayer(index) {
				this.processPage(index);
				this.pageState.splice(index, 1, true);
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPage = index;
					}, 0);
				})
				this.triangleDeg[index] = 180;
			},
			reloadActiveMenuArr() {
				for (let i = 0; i < this.filterData.length; i++) {
					let tmpitem = this.filterData[i];
					let tmpArr = this.processActive(tmpitem);
					tmpitem = this.processSubMenu(tmpitem);
					if (this.activeMenuArr[i].length != tmpArr.length) {
						this.filterData[i] = tmpitem;
						this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
						this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
					}
				}
				this.subData = this.filterData;
				this.$forceUpdate();
			},
			processPage(index) {
				//check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
				this.reloadActiveMenuArr();
				//重置UI控制数组
				this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
				if (this.menu[index].type == 'filter') {
					//重载筛选页选中状态
					let level = this.shadowActiveMenuArr[index].length;
					for (let i = 0; i < level; i++) {
						let box = this.subData[index].submenu[i].submenu;
						for (let j = 0; j < box.length; j++) {
							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
								this.subData[index].submenu[i].submenu[j].selected = true;
							} else {
								this.subData[index].submenu[i].submenu[j].selected = false;
							}
						}
					}
				} else if (this.menu[index].type == 'hierarchy') {
					this.$nextTick(() => {
						setTimeout(() => {
							//滚动到选中项
							this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
							this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
						}, 0);
					})
				} else if (this.menu[index].type == 'radio') {
					//重载筛选页选中状态
					let level = this.shadowActiveMenuArr[index].length;
					for (let i = 0; i < level; i++) {
						let box = this.subData[index].submenu[i].submenu;
						for (let j = 0; j < box.length; j++) {
							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
								this.subData[index].submenu[i].submenu[j].selected = true;
							} else {
								this.subData[index].submenu[i].submenu[j].selected = false;
							}
						}
					}
				}
			},
			processActive(tmpitem) {
				let tmpArr = []
				if (tmpitem.type == 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
					let level = this.getMaxFloor(tmpitem.submenu);
					while (level > 0) {
						tmpArr.push(0);
						level--;
					}
				} else if (tmpitem.type == 'filter') {
					let level = tmpitem.submenu.length;
					while (level > 0) {
						tmpArr.push([]);
						level--;
					}
				} else if (tmpitem.type == 'radio') {
					let level = tmpitem.submenu.length;
					while (level > 0) {
						tmpArr.push([]);
						level--;
					}
				}
				return tmpArr;
			},
			processSubMenu(menu) {
				if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
					for (let i = 0; i < menu.submenu.length; i++) {
						menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
					}
				} else {
					menu.submenu = [];
				}
				return menu;
			},
			//计算菜单层级
			getMaxFloor(treeData) {
				let floor = 0
				let max = 0

				function each(data, floor) {
					data.forEach(e => {
						max = floor > max ? floor : max;
						if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
							each(e.submenu, floor + 1)
						}
					})
				}
				each(treeData, 1)
				return max;
			},
			discard() {

			}
		}
	}
</script>
<style lang="scss">
	.filter1{
		font-size: 29rpx;
		position: absolute;
		top: 0;
		background:rgba(154,155,160,1);
	}
	.HMfilterDropdown {
		flex-shrink: 0;
		width: 100%;
		height: 100rpx;

		position: fixed;
		z-index: 997;
		flex-wrap: nowrap;
		display: flex;
		flex-direction: row;
		top: var(--window-top);
		left: 0;

		view {
			display: flex;
			flex-wrap: nowrap;
		}
	}

	.region {
		flex: 1;
		height: 100rpx;
	}

	.nav {
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 100rpx;
		border-bottom: solid 4rpx #F3F3F3;
		z-index: 12;
		background-color: #ffffff;
		flex-direction: row;
		font-size: 30rpx;
		color: #494949;
		font-weight: Medium;

		.first-menu {
			width: 100%;

			flex-direction: row;
			align-items: center;
			justify-content: center;
			transition: color .2s linear;


			&.on {
				color: #E0393D;

				.iconfont {
					color: #E0393D;
				}
			}

			.name {
				height: 20px;
				text-align: center;
				text-overflow: clip;
				overflow: hidden;
			}

			.iconfont {
				width: 13px;
				height: 13px;
				align-items: center;
				justify-content: center;
				transition: transform .2s linear, color .2s linear;
			}
		}
	}

	.sub-menu-class {
		width: 100%;
		position: absolute;
		left: 0;
		transform: translate3d(0, - 100%, 0);

		background-color: #ffffff;
		z-index: 11;
		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
		overflow: hidden;
		flex-direction: row;
		transition: transform .15s linear;

		&.hide {
			display: none;
		}

		&.show {
			transform: translate3d(0, calc(100rpx + 1rpx), 0);
		}
	}

	.sub-menu-list {
		width: 100%;
		height: 345px;
		flex-direction: column;

		.sub-menu {
			min-height: 100rpx;
			font-size: 13px;
			flex-direction: column;
			padding-right: 15px;

			>.menu-name {
				height: 100rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				>.iconfont {
					display: none;
					font-size: 18px;
					color: #E0393D;
				}
			}
		}

		&.first {
			flex-shrink: 0;
			width: 236rpx;
			background-color: #f0f0f0;

			.sub-menu {
				padding-left: 15px;

				&.on {
					background-color: #fff;
				}
			}
		}

		&.alone {
			max-height: 345px;
			min-height: 170px;
			height: auto;

			.sub-menu {
				min-height: calc(100rpx - 1rpx);
				margin-left: 15px;
				border-bottom: solid 1rpx #e5e5e5;

				&.on {
					color: #E0393D;

					>.menu-name {
						>.iconfont {
							display: block;
						}
					}
				}
			}
		}

		&.not-first {
			.sub-menu {
				min-height: calc(100rpx - 1rpx);
				margin-left: 15px;
				border-bottom: solid 1rpx #e5e5e5;

				>.menu-name {
					height: calc(100rpx - 1rpx);

					>.iconfont {
						display: none;
						font-size: 18px;
						color: #E0393D;
					}
				}

				&.on {
					color: #E0393D;

					>.menu-name {
						>.iconfont {
							display: block;
						}
					}
				}

				.more-sub-menu {
					flex-direction: row;
					flex-wrap: wrap;
					padding-bottom: 9px;

					>text {
						height: 30px;
						border-radius: 3px;
						background-color: #f5f5f5;
						color: #9b9b9b;
						margin-bottom: 6px;
						margin-right: 6px;
						text-align: center;
						line-height: 30px;
						border: solid #f5f5f5 1rpx;
						flex: 0 0 calc(33.33% - 6px);
						overflow: hidden;
						font-size: 12px;

						&.on {
							border-color: #f6c8ac;
							color: #E0393D;
						}

						.iconfont {
							color: #9b9b9b;
						}
					}
				}
			}
		}
	}

	.filter {
		width: 100%;
	
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.menu-box {
			width: 698rpx;
		margin-bottom: 100rpx;
	flex-direction: column;
			flex-shrink: 1;

			.box {
				width: 100%;
				margin-top: 16px;
				flex-direction: column;

				.title {
					width: 100%;
					font-size: 30rpx;
					color: #494949;
					line-height: 100rpx;

				}

				.labels {
					flex-direction: row;
					flex-wrap: wrap;
					.on {
						border-color: #E0393D;
						background-color: #E0393D;
						color: #fff;
					}
					>view {
						width: 200rpx;
						height: 57rpx;

						/* 		border: solid 1rpx #adadad; */
						border-radius: 4rpx;
						margin-right: 15px;
						margin-top: 8px;
						font-size: 24rpx;
						background-color: #F8F8F6;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-weight: 400;

					}
				}
			}
		}

		.btn-box {
			flex-shrink: 0;
			width: 100%;
			height: 83rpx;
			flex-direction: row !important;
			align-items: center;
			justify-content: space-between;

			>view {
				width: 50%;
				height: 83rpx;

				border: solid 2rpx #F3F3F3;
				align-items: center;
				justify-content: center;
			}

			font-size: 28rpx;

			.reset {
				color: #494949;
			}

			.submit {
				color: #fff;
				background-color: #E0393D;
			}
		}
	}

	.mask {
		z-index: 10;
		position: fixed;
		top:200rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .15s linear;

		&.show {
			background-color: rgba(0, 0, 0, 0.5);
		}

		&.hide {
			display: none;
		}
	}

	/* 字体图标 */
	@font-face {
		font-family: "HM-FD-font";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
	}

	.iconfont {
		font-family: "HM-FD-font" !important;
		font-size: 13px;
		font-style: normal;
		color: #757575;

		&.triangle {
			&:before {
				content: "\e65a";
			}
		}

		&.selected {
			&:before {
				content: "\e607";
			}
		}
	}
	
	
	@font-face {font-family: "iconfont";
	  src: url('//at.alicdn.com/t/font_1875698_r45p4qdd9ss.eot?t=1592836626334'); /* IE9 */
	  src: url('//at.alicdn.com/t/font_1875698_r45p4qdd9ss.eot?t=1592836626334#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
	  url('//at.alicdn.com/t/font_1875698_r45p4qdd9ss.woff?t=1592836626334') format('woff'),
	  url('//at.alicdn.com/t/font_1875698_r45p4qdd9ss.ttf?t=1592836626334') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	  url('//at.alicdn.com/t/font_1875698_r45p4qdd9ss.svg?t=1592836626334#iconfont') format('svg'); /* iOS 4.1- */
	}
	
	.iconfont1 {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-kefu:before {
	  content: "\e753";
	}
	
	.icon-dianhua1:before {
	  content: "\e611";
	}
	
	.icon-icon--:before {
	  content: "\e745";
	}
	
	.icon-a:before {
	  content: "\e601";
	}
	
	.icon-qiyegongchangjianzhu:before {
	  content: "\e802";
	}
	
	.icon-shouye-:before {
	  content: "\e64a";
	}
	
	.icon-wode:before {
	  content: "\e735";
	}
	
	.icon-bookmark_icon:before {
	  content: "\e65e";
	}
	
	.icon-qianjin:before {
	  content: "\e622";
	}
	
	.icon-dalou:before {
	  content: "\e699";
	}
	
	.icon-dianji:before {
	  content: "\e83e";
	}
	
	.icon-bofang:before {
	  content: "\e618";
	}
	
	.icon-fenxiang_2:before {
	  content: "\e600";
	}
	
	.icon-tupian:before {
	  content: "\e62e";
	}
	
	.icon-paixu:before {
	  content: "\e648";
	}
	
	.icon-gonglve:before {
	  content: "\e7a0";
	}
	
	.icon-ico_yueduliang:before {
	  content: "\e62a";
	}
	
	.icon-gongchangguanli:before {
	  content: "\e6a8";
	}
	
	.icon-shoucang:before {
	  content: "\e633";
	}
	
	.icon-jianzhu:before {
	  content: "\e650";
	}
	
	.icon-houtui:before {
	  content: "\e64f";
	}
	
	.icon-tianxieziliao:before {
	  content: "\e6b7";
	}
	
	.icon-yonghu:before {
	  content: "\e610";
	}
	
	.icon-dingwei:before {
	  content: "\e64c";
	}
	.paixun{
		font-size: 29rpx;
		color:#9A9BA0 ;
		display: flex;
		align-items: center;
	}
	.onPaixun{
		color:#E0393D; 
	}
</style>
